/*
 * @Author: hongbin
 * @Date: 2022-12-01 15:59:37
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-03 21:27:20
 * @Description:与单独个人的对话组件
 */
import { FC } from "react";
import styled, { css } from "styled-components";
import { useAuth } from "../../../context/AuthProvide";
import { INearbyUser } from "../../../meta/helper/OtherUser";
import { FlexDiv } from "../../../styled";

interface IProps {
    user: INearbyUser;
    select: boolean;
    index: number;
    component?: JSX.Element;
    onClick: () => void;
    isNewMsg: boolean;
}

const Dialogue: FC<IProps> = ({ isNewMsg, onClick, index, select, user, component }) => {
    const {
        user: { friendsList },
    } = useAuth();

    return (
        <>
            <Container onClick={onClick} select={select}>
                <FlexDiv items="center" justify="space-between">
                    <code>{index}</code>
                    <p>
                        {user.name}
                        {friendsList && friendsList.map((f) => f.friendId)?.includes(user._id) ? (
                            <span>好友</span>
                        ) : null}
                    </p>
                    <span>{user.distance.toFixed(1)}米</span>
                </FlexDiv>
                {isNewMsg ? <NewMsg>新</NewMsg> : null}
            </Container>
            {component}
        </>
    );
};

export default Dialogue;

const NewMsg = styled.span`
    position: absolute;
    top: -1vw;
    right: -1vw;
    background: #17610c;
    border-radius: 1vw;
    padding: 0.1vh 0.5vw;
    font-size: 1vw;
    color: #fff;
`;

const hoverCss = css`
    background-color: #1d6c0e;
    --color: #fff;
`;

const Container = styled.div<{ select: boolean }>`
    transition: all 0.3s linear;
    position: relative;
    & > div {
        margin: 0.5vh 0;
        padding: 0 0.5vh;
        p {
            font-size: 1.4vmax;
            color: var(--color);
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 50%;
            span {
                background: #082403;
                color: #ffffff;
                padding: 0.1vmax;
                font-size: 0.9vmax;
                border-radius: 0.2vmax;
                margin-left: 0.2vmax;
            }
        }
        span {
            font-size: 0.6em;
            color: var(--color, #0b3b01);
        }
        code {
            width: 3vmax;
            height: 3vmax;
            background: #6b6b6b3c;
            line-height: 3vmax;
            text-align: center;
            font-weight: bold;
            color: var(--color, #17610c);
            border: 1px solid var(--color, #1f740e);
            font-size: 2vmax;
            font-family: inherit;
        }
    }

    :hover {
        ${hoverCss};
    }
    ${({ select }) =>
        select &&
        css`
            ${hoverCss};
        `}
`;
